<script setup lang="ts">
import type { Project } from "@/common/apis/dashboard/type"
import { moduleNameText } from "@/common/apis/dashboard/type"

interface Props {
  card: Project
}
const props = defineProps<Props>()
const emit = defineEmits(["handleView", "handleDelete", "toggleSelect", "handleExport"])

function getText(card: Project) {
  const result: string[] = []
  const items: string[] = JSON.parse(card.project_modules)
  items.forEach((item) => {
    result.push(`${moduleNameText[item]}(${card.project_statics[`${item}_count` as keyof typeof card.project_statics]})`)
  })
  return result
}

function handleView() {
  emit("handleView", props.card)
}
function handleDelete() {
  emit("handleDelete", props.card)
}
function handleExport() {
  emit("handleExport", props.card)
}

</script>

<template>
  <el-card class="card-item" @click="handleView">
    <div class="card-header">
      <img src="@@/assets/images/dashboard/bh.png">
      <span :title="card.project_name">{{ card.project_name }}</span>
    </div>
    <div class="card-body">
      <div class="card-body-item" v-for="(item, cindex) in getText(card)" :key="cindex">
        <span class="module" :title="item">
          {{ item }}
        </span>
      </div>
    </div>
    <div class="card-footer">
      <div class="title">
        <el-icon color="#6B98D7">
          <Calendar />
        </el-icon>
        <span>{{ card.create_time }}</span>
      </div>
      <div class="operate" @click.stop>
        <el-dropdown  trigger="click">
          <el-link :underline="false">
            <el-icon><MoreFilled /></el-icon>
          </el-link>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <template #default>
                  <el-link :underline="false" title="" @click.stop="handleView()">
                    <el-icon :size="18">
                      <View />
                    </el-icon>
                    查看
                  </el-link>
                </template>
              </el-dropdown-item>
              <!-- <el-dropdown-item>
                <template #default>
                  <el-link :underline="false" title="" @click.stop="handleExport()">
                    <el-icon :size="18">
                      <View />
                    </el-icon>
                    导出
                  </el-link>
                </template>
              </el-dropdown-item> -->
              <el-dropdown-item>
                <template #default>
                  <el-link :underline="false" title="" type="danger" @click.stop="handleDelete()">
                    <el-icon :size="18">
                      <Delete />
                    </el-icon>
                    删除
                  </el-link>
                </template>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.module {
  padding-left: 15px;
  position: relative;
  &::before {
    content: ""; /* 使用圆点字符 */
    position: absolute;
    left: 3px; /* 调整圆点的位置 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    background: #6b98d7; /* 圆点的颜色 */
    width: 5px;
    height: 5px;
    border-radius: 5px;
  }
}
</style>
